<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<div class="content">
    <header>
        <h1>Manage Students</h1>
        <div class="btn-wrapper">
            <a href="javascript:newDownloadForm()" class="btn btn-primary">Download Users</a>
            <a href="javascript:newClassListForm()" class="btn btn-primary">Upload Classlist</a>
            <a href="javascript:newStudentForm()" class="btn btn-primary">New Student</a>
        </div>
    </header>
    {# This is a data table #}
    {% if sections|length > 0 %}
        <table id="student-table" class="table table-striped mobile-table directory-table">
            <caption>Students Enrolled</caption>
            <thead>
                <tr>
                    <th>Registration Section</th>
                    <th>User ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Rotating Section</th>
                    <th>Manual Registration</th>
                    <th>Edit Student</th>
                </tr>
            </thead>
            {% for registration, students in sections %}
                <tbody id="section-{{ registration }}">
                    <tr class="info">
                        <th class="section-break" colspan="8">Students Enrolled in Registration Section {{ registration }}</td>
                    </tr>
                    {% for student in students %}
                        {% set class = "" %}
                        {% if student.accessGrading() %}
                            {% set class = "access-grading" %}
                        {% endif %}
                        <tr id="user-{{ student.getId() }}" class="{{ class }}">
                            <td>{{ registration }}</td>
                            <td class="align-left">{{ student.getId() }}</td>
                            <td class="align-left">{{ student.getDisplayedFirstName() }}</td>
                            <td class="align-left">{{ student.getDisplayedLastName() }}</td>
                            <td>{{ student.getRotatingSection() ?? "NULL" }}</td>
                            <td>{{ student.isManualRegistration() ? "TRUE" : "FALSE" }}</td>
                            <td><a href="javascript:editUserForm('{{ student.getId() }}');" aria-label="edit user {{grader.getDisplayedFirstName()}} {{grader.getDisplayedLastName()}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                    {% endfor %}
                </tbody>
            {% endfor %}
        </table>
    {% else %}
        <p id="no-one-found" class="warning">No students found</p>
    {% endif %}
</div>
{% include('admin/users/UserForm.twig') %}
{% include('admin/users/ClassListForm.twig') %}
{% include('admin/users/DownloadForm.twig') with { 'code': 'user' } %}
